<template>
  <div class="left">
    <!-- <dv-scroll-board :config="config" style="width: 1500px;height:353px" class="left_item" /> -->
    <div class="left_item_01">
      <div class="left_item_box">
        <h5 class="left_item_title">
          <img src="@/assets/img/left/canguanrenshu/head_icon.png" alt="" class="left_item_img1">
          <span>展馆参观人数</span>
          <img src="@/assets/img/left/canguanrenshu/head.png" alt="" class="left_item_img2">
        </h5>
        <!-- <dv-scroll-board :config="config" style="width: 1450px;height:500px;" class="left_item1_con" /> -->
        <div class="left_item1_content" ref="leftItem1"></div>
      </div>
    </div>
    <div class="left_item_02">
      <div class="left_item_02_box">
        <h5 class="left_item2_title">
          <img src="@/assets/img/left/jifenpaihang/head_icon.png" alt="">
          <span>党组织积分排行榜</span>
          <img src="@/assets/img/left/jifenpaihang/head.png" alt="">
        </h5>
        <div ref="leftItem2" class="left_item2_con">
          <!-- <dv-capsule-chart :config="config2" style="width:833px;height:835px" /> -->
          <ul class="left_item2_head">
            <li :class="{active: activeIndex == 0 || activeIndex == 6}">党员</li>
            <li :class="{active: activeIndex == 1}">管理型</li>
            <li :class="{active: activeIndex == 2}">生产型</li>
            <li :class="{active: activeIndex == 3}">服务型</li>
            <li :class="{active: activeIndex == 4}">经营型</li>
          </ul>
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
              <div class="left_item2_echart">
                <dv-scroll-ranking-board :config="config2" />
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <dv-scroll-ranking-board :config="config22" />
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <dv-scroll-ranking-board :config="config23" />
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <dv-scroll-ranking-board :config="config24" />
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <dv-scroll-ranking-board :config="config25" />
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
    </div>
    <div class="left_item_03">
      <div class="left_item_03_box">
        <h5 class="left_item2_title">
          <img src="../../assets/img/left/shiyongpinlv/head_icon.png" alt="">
          <span>设备使用频率</span>
          <img src="../../assets/img/left/shiyongpinlv/head.png" alt="">
        </h5>
        <div ref="leftItem3" class="left_item3_con"></div>
      </div>
    </div>
    <!-- <div class="left_item" ref="leftItem1"></div> -->
    <!-- <div class="left_item" ref="leftItem4"></div> -->
  </div>
</template>

<script>
import left1 from "./data/left1"
import left2 from "./data/left2"
import left3 from "./data/left3"
import request from "../../api/request"
export default {
  data() {
    const self = this
    return {
      config:{
        headerHeight: 75,
        // header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ]
      },
      config2:{
        data: [],
        rowNum: 8
      },
      config22:{
        data: [],
        rowNum: 8
      },
      config23:{
        data: [],
        rowNum: 8
      },
      config24:{
        data: [],
        rowNum: 8
      },
      config25:{
        data: [],
        rowNum: 8
      },
      timer1: null,
      myChart1: '',
      myChart2: '',
      myChart3: '',
      defaultColors: ['#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF','#80E6FF'],
      swiperOptions: {
        // loop: true,
        autoplay: true,
        delay: 6000,
        disableOnInteraction: false,
        // slidesPerView: 4, //显示个数
        // direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChangeTransitionStart(){
            // console.log(swiper, index)
            console.log(this.activeIndex)
            self.activeIndex = this.activeIndex
          }
        }
      },
      swiper: '',
      activeIndex: 0
    }
  },
  mounted() {
    this.myChart1 = this.$echarts.init(this.$refs.leftItem1);
    // this.myChart2 = this.$echarts.init(this.$refs.leftItem2);
    this.myChart3 = this.$echarts.init(this.$refs.leftItem3);
    // this.drawLine1()
    // this.drawLine2()
    // this.drawLine3()
    // this.drawLine4()
    if(this.timer1){
      clearInterval(this.timer1)
    }
    this.getData()
    this.timer1 = setInterval(() => {
      this.getData()
    }, 10000)
  },
  methods: {
    getData() {
      // 获取参观人数
      request({
        url: '/api/v1/visitNumByStatus.json',
        method: 'post',
        body: {}
      }).then(res => {
        // console.log(res)
        const legendArr = res.data.map(item => item.type).filter((item, index, arr) => {
          return arr.indexOf(item, 0) === index;
        })
        // console.log(legendArr, 'legendArr')
        const xArr = res.data.map(item => item.month).filter((item, index, arr) => {
          return arr.indexOf(item, 0) === index;
        })
        // console.log(xArr, 'xArr')
        const yArr = legendArr.map(item => {
          return xArr.map(itm => {
            let obj = res.data.find(im => im.month == itm && im.type == item) || {}
            if(obj)
            return obj.total || 0
          })
        })
        // const yArr = res.data.map(item => item.total)
        // console.log(yArr)
        this.drawLine1(legendArr, xArr,yArr)
      })
      // 获取排行榜-党员
      request({
        url: '/api/v1/scoreList.json',
        method: 'post',
        body: {
          type: 'DY',
          // orgType: 'GL'
        }
      }).then(res => {
        this.$set(this.config2, 'data', res.data.map(item => {return {name: item.name, value: item.score - 0}}))
        this.$set(this.config2, 'colors', res.data.map(() => '#80E6FF'))
      })
      // 获取排行榜-管理型
      request({
        url: '/api/v1/scoreList.json',
        method: 'post',
        body: {
          type: 'DZZ',
          orgType: 'GL'
        }
      }).then(res => {
        this.$set(this.config22, 'data', res.data.map(item => {return {name: item.name, value: item.score - 0}}))
        this.$set(this.config22, 'colors', res.data.map(() => '#80E6FF'))
      })
      // 获取排行榜-服务型
      request({
        url: '/api/v1/scoreList.json',
        method: 'post',
        body: {
          type: 'DZZ',
          orgType: 'FW'
        }
      }).then(res => {
        this.$set(this.config24, 'data', res.data.map(item => {return {name: item.name, value: item.score - 0}}))
        this.$set(this.config24, 'colors', res.data.map(() => '#80E6FF'))
      })
      // 获取排行榜-经营型
      request({
        url: '/api/v1/scoreList.json',
        method: 'post',
        body: {
          type: 'DZZ',
          orgType: 'JY'
        }
      }).then(res => {
        this.$set(this.config25, 'data', res.data.map(item => {return {name: item.name, value: item.score - 0}}))
        this.$set(this.config25, 'colors', res.data.map(() => '#80E6FF'))
      })
      // 获取排行榜-生产型
      request({
        url: '/api/v1/scoreList.json',
        method: 'post',
        body: {
          type: 'DZZ',
          orgType: 'SC'
        }
      }).then(res => {
        this.$set(this.config23, 'data', res.data.map(item => {return {name: item.name, value: item.score - 0}}))
        this.$set(this.config23, 'colors', res.data.map(() => '#80E6FF'))
      })
      // 设备使用率
      request({
        url: '/api/v1/userRate.json',
        method: 'get'
      }).then(res => {
        console.log(res)
        let total = 0
        res.data = res.data.filter((item, index) => index < 4).map(item => {total += item.total; return item})
        const chartList = res.data.map(item => {return {value: item.total, name: item.equipmentName, total: total}})
        const left3Data = {
          animation: true,
          series: left3.series(chartList)
        }
        this.drawLine3(left3Data)
      })
    },
    drawLine1(legendArr, xArr, yArr) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.leftItem1);
      // 绘制图表
      if(legendArr){
        left1.legend.data = legendArr
      }
      if(xArr){
        left1.xAxis.data = xArr
      }
      if(yArr){
        left1.series = yArr.map((item,index) => {
          return {
            name: legendArr[index],
            type: 'line',
            symbolSize: 14,
            data: item,
            "label": {
              "show": true,
              "position": "top",
              "distance": 10,
              fontSize: 16,
              "color": "#FFFFFF"
            }
          }
        })
        // left1.series.data = yArr
      }
      console.log(left1)
      this.myChart1.setOption(left1);
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.leftItem2);
      // 绘制图表
      myChart.setOption(left2);
    },
    drawLine3(left3) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.leftItem3);
      // 绘制图表
      this.myChart3.setOption(left3);
    },
    // drawLine4() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(this.$refs.leftItem4);
    //   // 绘制图表
    //   myChart.setOption(left1);
    // },
  }
}
</script>

<style scoped>
.left{
  position: absolute;
  left: 0;
  top: 0;
  width: 1977px;
  height: 2160px;
}
.left_item_01{
  width: 1977px;
  height: 1059px;
  position: absolute;
  top: 92px;
  left: -16px;
  z-index: 1;
  background: url("../../assets/img/left/canguanrenshu/bg.png") no-repeat left top;
  background-size: cover;
}
.left_item_box{
  width: 1768px;
  height: 773px;
  /* background: pink; */
  position: absolute;
  left: 136px;
  top: 163px;
  z-index: 10;
}
.left_item_title{
  display: flex; 
  align-items: center;
  justify-content: space-between;
  position: relative;
  font-size: 36px;
  font-weight: 300;
  color: #FFF;
  padding: 22px 42px 22px 39px;
}
.left_item_img1{
  width: 42px;
  height: 37px;
}
.left_item_img2{
  width: 1396px;
  height: 30px;
}
.left_item1_content{
  height: 680px;
}
.left_item_02{
  position: absolute;
  width: 1018px;
  height: 1095px;
  left: 11px;
  bottom: 17px;
  background: url("../../assets/img/left/jifenpaihang/bg.png") no-repeat left top;
  background-size: cover;
}
.left_item_02_box{
  position: absolute;
  width: 833px;
  height: 927px;
  top: 83px;
  left: 91px;
  z-index: 10;
}
.left_item2_title{
  display: flex;
  padding: 22px 44px 22px 41px;
  justify-content: space-between;
  align-items: center;
  font-size: 36px;
  font-weight: 300;
}
.left_item2_head{
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40px;
}
.left_item2_head li{
  list-style: none;
  font-size: 30px;
  font-weight: 300;
  position: relative;
  height: 100px;
  line-height: 100px;
}
.left_item2_head li.active::after{
  content: " ";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  width: 50px;
  height: 5px;
  background-color: rgb(128,230,255);
}
.left_item2_con{
  text-align: left;
  width: 750px;
  height: 800px;
  margin: 0 auto;
}
.left_item2_echart{
  width: 750px;
  height: 660px;
}
.left_item_03{
  position: absolute;
  width: 1038px;
  height: 1117px;
  bottom: -18px;
  left: 925px;
  z-index: 1;
  background: url("../../assets/img/left/shiyongpinlv/bg.png") no-repeat left top;
  background-size: cover;
}
.left_item_03_box{
  width: 833px;
  height: 927px;
  position: absolute;
  z-index: 10;
  left: 112px;
  top: 70px;
}
.left_item3_con{
  height: 835px;
}
</style>

<style>

.left .dv-capsule-chart .capsule-item{
  background-color: rgba(255,255,255,.2);
  box-shadow: none;
}
.left .info-name{
  }
.left .ranking-info{
  font-size: 20px;
  align-items: center;
}
.left .dv-scroll-ranking-board .ranking-info .rank{
  width: auto;
  padding-right: 10px;
  flex-shrink: 0;
}
</style>